import { useIntl } from 'umi';
import { InfoBlock } from '../../components/InfoBlock';
import { InfoField } from '../../components/InfoField';

interface IProps {
  data: API.StationRealtimeDTO['realtimeDTO'];
}

export const Info: React.FC<IProps> = ({ data }) => {
  const intl = useIntl();

  const items = [
    {
      label: intl.formatMessage({ id: 'data.totalCharge' }),
      value: data?.chargeEnergy,
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'data.totalDischarge' }),
      value: data?.disChargeEnergy,
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'data.dailyCharge' }),
      value: data?.dailyChargeEnergy,
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'data.dailyDischarge' }),
      value: data?.dailyDisChargeEnergy,
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'data.totalOnGridEnergy' }),
      value: data?.pocOnGridEnergy,
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'data.totalOffGridEnergy' }),
      value: data?.pocOffGridEnergy,
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'data.dailyOnGridEnergy' }),
      value: data?.dailyPocOnEnergy,
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'data.dailyOffGridEnergy' }),
      value: data?.dailyPocOffEnergy,
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'data.totalRevenue' }),
      value: data?.historyIncome,
      unit: '万元',
    },
    {
      label: intl.formatMessage({ id: 'data.dailyRevenue' }),
      value: data?.dailyIncome,
      unit: '万元',
    },
  ];
  return (
    <div style={{ padding: '20px 30px', marginBottom: 10 }}>
      <InfoBlock
        title={intl.formatMessage({ id: 'stationRealtimeMonitoring.electricityInformation' })}
      >
        {items.map((item, index) => (
          <InfoField key={index} label={item.label} value={item?.value} unit={item.unit} />
        ))}
      </InfoBlock>
    </div>
  );
};
